<template>
  <div style="position: relative">
    <el-container>
      <el-menu class="top"
               mode="horizontal"
               active-text-color="yellowgreen"
               background-color="black"
               text-color="yellow"
      >
        <el-sub-menu index="1">
          <template #title>立即购买</template>
          <el-menu-item index="1-1"><a href="/home" class="tit">主页</a></el-menu-item>
          <el-menu-item index="1-2"><a href="/gameNews" class="tit">游戏新闻</a></el-menu-item>
          <el-menu-item index="1-3"><a href="/media" class="tit">媒体</a></el-menu-item>
          <el-menu-item index="1-4"><a href="/community" class="tit">社群</a></el-menu-item>
        </el-sub-menu>
        <a href="https://borderlands.2k.com/zh-CN/">
          <img src="imgs/11.jpg" style="position: absolute;right: 50px">
        </a>
      </el-menu>
      <el-main style="background-color: black">
        <!--可变区域  -->
        <router-view/>
      </el-main>
      <el-footer style="background-color: black;height: 700px;">
        <img src="imgs/16.png" width="100%">
        <div class="fot">
          <img src="imgs/17.svg" width="50" height="50px" class="fotimg" style="margin-left: 20px">
          <img src="imgs/18.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/19.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/20.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/21.svg" width="50" height="50px" class="fotimg" style="margin-right: 0">
        </div>
        <div class="fot2" style="margin-bottom: 30px">
          <img src="imgs/22.webp" width="100px" style="margin-right: 20px;margin-left: 10px">
          <img src="imgs/23.webp" width="100px" style="margin-right: 0px">
        </div>

        <div style="color: white;text-align: center" class="fott" >
          <ul >
            <li style="margin-left: 20px">隐私权政策</li>
            <li>服务条款</li>
            <li>COOKIE条款</li>
            <li>COOKIE 2K广告合作伙伴</li>
          </ul>
        </div>
        <div style="color: white;text-align: center;margin-top: 20px" class="fotbot" >
          <ul >
            <li >太原学府中学</li>
            <li>项目经理：吴林峰</li>
            <li>班主任：张雨</li>
            <li>小组成员：陈子冬、常浩东、李旋、朱钰灏</li>
          </ul>
        </div>
      </el-footer>

    </el-container>
  </div>

</template>

<script setup>
import {ref} from "vue";


</script>

<style>
.top {
  width: 100%;
  position: fixed;

}

.fot {
  width: 500px;
  height: 100px;
  margin: 50px auto;
  background-color: black;
  line-height: 120px;
}

.fotimg {
  margin-right: 50px;
}
.fot2 {
  margin: 0 auto;
  width: 240px;
  height: 200px;
  background-color: black;

}
.fott{
  width: 700px;
  height: 100px;
  background-color:black;
  margin: 0 auto;
  overflow: hidden;
  line-height: 100px;
}
.tit {
  color: yellow;
  text-decoration: none;
}

li{
  float: left;
  list-style-type: none;
  padding-right: 50px;;
}
.fotbot{
  width: 900px;
  height: 50px;
  margin: 0 auto;
  background-color: black;
  line-height: 50px;
}
</style>
